<script setup>
import {ref, onMounted} from "vue";
import {Search, Tickets} from "@element-plus/icons-vue";
import {fetchFlashList, updateStatusFlash, deleteFlash, createFlash, updateFlash} from "@/api/flash.js";
import {useRouter} from "vue-router";

const router = useRouter();

const formData = ref({
  spikesName: ''
});
const defaultListQuery = {
  pageNum: 1,
  pageSize: 5,
  keyword: null
};
const defaultFlashPromotion = {
  id: null,
  title: null,
  startDate: null,
  endDate: null,
  status: 0
};
const listQuery = Object.assign({}, defaultListQuery)
const flashPromotion = Object.assign({}, defaultFlashPromotion)

onMounted(() => {
  getFlashList();
});
const total = ref(0);
const flashList = ref([]);
const getFlashList = async () => {
  const res = await fetchFlashList(listQuery);
  flashList.value = res.data.data.list;
  total.value = res.data.data.total;
}


// 格式化订单创建时间
const formatDate = (date) => {
  // 检查是否为 Date 对象
  if (!(date instanceof Date)) {
    date = new Date(date);
  }
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, '0');
  const day = String(date.getDate()).padStart(2, '0');
  const hour = String(date.getHours()).padStart(2, '0');
  const minute = String(date.getMinutes()).padStart(2, '0');
  const second = String(date.getSeconds()).padStart(2, '0');
  return `${year}-${month}-${day} ${hour}:${minute}:${second}`;
}
// 格式化活动状态
const formatActiveStatus = (row) => {
  let nowDate = new Date();
  let startDate = new Date(row.startDate);
  let endDate = new Date(row.endDate);
  if (nowDate.getTime() >= startDate.getTime() && nowDate.getTime() <= endDate.getTime()) {
    return '活动进行中';
  } else if (nowDate.getTime() > endDate.getTime()) {
    return '活动已结束';
  } else {
    return '活动未开始';
  }
}

// 搜索查询
const handleSearch = () => {
  listQuery.pageNum = 1;
  listQuery.keyword = formData.value.spikesName;
  getFlashList();
}

// 重置搜索
const handleResetSearch = () => {
  listQuery.pageNum = 1;
  listQuery.keyword = null;
  formData.value.spikesName = '';
  getFlashList();
}


// TODO: 秒杀时间段
const handleShowSessionList = () => {
  router.push({ path: '/flash/flashList' });
}


// TODO: 设置商品
const handleSelectTime = (row) => {
  router.push({ path: '/flash/selectTime', query: { id: row.id } });
}



// TODO: 分页操作方法
const handleSizeChange = (size) => {
  listQuery.pageSize = size;
  getFlashList();
}
const handleCurrentChange = (val) => {
  listQuery.pageNum = val;
  getFlashList();
}

</script>

<template>
  <div class="spikes-list">
    <!-- 搜索框 -->
    <div class="spikes-search">
      <div class="logo">
        <div class="logo-text">
          <el-icon>
            <Search/>
          </el-icon>
          <span>筛选搜索</span>
        </div>
        <div class="search-btn">
          <el-button type="primary" @click="handleSearch()">查询结果</el-button>
          <el-button icon="refresh" @click="handleResetSearch()">重置</el-button>
        </div>
      </div>
      <div class="search">
        <el-form :inline="true" ref="searchForm" v-model="formData" label-width="100px">
          <el-form-item label="输入搜索内容:">
            <el-input v-model="formData.spikesName" placeholder="请输入搜索" clearable></el-input>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <!-- 秒杀活动列表 -->
    <div class="add-list">
      <div class="add-btn">
        <el-icon>
          <Tickets/>
        </el-icon>
        <span>数据列表</span>
      </div>
      <div class="add-btn">
        <el-button type="primary" @click="handleShowSessionList()">秒杀时间段</el-button>
        <el-button type="primary" plain @click="handleAdd()">添加活动</el-button>
      </div>
    </div>
    <!-- 列表 -->
    <div class="spikes-table">
      <el-table :data="flashList" border style="width: 100%;">
        <el-table-column type="selection" width="100" align="center"></el-table-column>
        <el-table-column label="活动ID" align="center">
          <template #default="{row}">
            {{ row.id }}
          </template>
        </el-table-column>
        <el-table-column label="活动标题" align="center">
          <template #default="{row}">
            {{ row.title }}
          </template>
        </el-table-column>
        <el-table-column label="活动状态" align="center">
          <template #default="{row}">
            {{ formatActiveStatus(row) }}
          </template>
        </el-table-column>
        <el-table-column label="开始时间" align="center">
          <template #default="{row}">
            {{ formatDate(row.startDate) }}
          </template>
        </el-table-column>
        <el-table-column label="结束时间" align="center">
          <template #default="{row}">
            {{ formatDate(row.endDate) }}
          </template>
        </el-table-column>
        <el-table-column label="上线/下线" align="center">
          <template #default="{row}">
            <el-switch
                @change="handleStatusChange(index, row)"
                :active-value="1"
                :inactive-value="0"
                v-model="row.status">
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="320px" align="center">
          <template #default="{row}">
            <el-button icon="setting" style="border:1px solid #26a2de;color: #26a2de;" @click="handleSelectTime(row)">设置商品</el-button>
            <el-button type="primary" icon="edit" @click="handleUpdate(row)">编辑</el-button>
            <el-button type="danger" icon="delete" @click="handleDelete(row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 分页 -->
    <div class="page-bar">
      <el-pagination
          background
          layout="total, sizes,prev, pager, next,jumper"
          :total="total"
          :page-sizes="[5,10,15,20]"
          v-model:page-size="listQuery.pageSize"
          v-model:current-page="listQuery.pageNum"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
      >
      </el-pagination>
    </div>
  </div>
</template>

<style scoped lang="scss">
.spikes-list {

  margin-top: 20px;
  display: flex;
  flex-direction: column;

  .spikes-search {
    //height: 100px;
    padding: 20px;
    margin-bottom: 20px;
    border: 1px solid #d5d5d5;
    border-radius: 5px;
    background-color: #ffffff;
    display: flex;
    flex-direction: column;

    .logo {
      width: 100%;
      font-size: 20px;
      display: flex;
      justify-content: space-between;
      align-items: center;

      span {
        margin: 0 8px;
      }

      .search-btn {
        margin-left: 30px;
        padding: 0 10px;
      }
    }

    .search {
      width: 100%;

      .el-form {
        margin: 20px;

        .el-form-item {
          width: 280px;
        }
      }
    }
  }

  .add-list {
    //height: 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 20px;
    margin-bottom: 20px;
    border: 1px solid #d5d5d5;
    border-radius: 5px;

    .add-btn {
      display: flex;
      align-items: center;

      span {
        margin-left: 8px;
        font-size: 18px;
      }
    }
  }

  .page-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 20px 0;

  }
}
</style>
